<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="this.$store.state.cartData"
      tooltip-effect="dark"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column width="160">
        <template slot-scope="scope">
          <img :src="'api/'+scope.row.productImg" alt style="width: 120px;" />
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品名称" width="300"></el-table-column>
      <el-table-column prop="price" label="单价">
        <template slot-scope="scope">{{scope.row.price}}元</template>
      </el-table-column>
      <el-table-column prop="num" label="数量">
        <template slot-scope="scope">
          <button class="btn">-</button>
          <input
            type="text"
            v-model="scope.row.num"
            style="width: 20px;"
            @keydown.enter="upnum(scope.row.num,scope.row.productID,scope.row.maxNum)"
          />
          <button class="btn">+</button>
        </template>
      </el-table-column>
      <el-table-column prop="money" label="小计">
        <template slot-scope="scope">
          <span style="color: #FF6700;">{{scope.row.money}}元</span>
        </template>
      </el-table-column>
      <el-table-column width="120" label="操作">
        <template slot-scope="scope">
          <el-popover placement="top" width="160" v-model="scope.row.visible" trigger="click">
            <p>确定删除吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button type="primary" size="mini" @click="delShop(scope.row.productID)">确定</el-button>
            </div>
            <span slot="reference" class="el-icon-error delIcon"></span>
          </el-popover>
          <div class="shop_foot">
            <div class="card_left">
              <b @click="$router.push('/goods')">继续购物</b>
              |共0件商品，已选择{{sum}}件商品
            </div>
            <div class="card_right">
              合计:{{allPrice}}元
              <el-button type="info" disabled >去结算</el-button>
              <el-button
                type="warning"
               
                @click="$router.push('/confirmOrder')"
              >去结算</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import  from ''
export default {
		data(){
			return{
				sum:0,
				allPrice:0
			}
		},
		methods:{
			handleSelectionChange(val) {
				this.sum = 0
				this.allPrice = 0
				val.forEach(item=>{
					this.sum += item.num
					this.allPrice += item.money
				})
				this.$store.commit("setOrder",val)
			},
			async upnum(num,id,maxNum){
				if(num > maxNum){
					num = maxNum
				}
				let {data:res} = await shopApi.updateShoppingCart({user_id: this.$store.state.user_id, product_id: id, num: num})
				console.log(res)
				if(res.code == "001"){
					this.$notify({
					    message: res.msg,
					    type: 'success'
					});
					loginApi.getShoppingCart({user_id: this.$store.state.user_id})
					.then(res=>{
						if(res.data.code === "001"){
							this.$store.commit("setCartData",res.data.shoppingCartData)
						}
					})
				}
			},
			async delShop(id){
				let {data:res} = await shopApi.deleteShoppingCart({user_id: this.$store.state.user_id, product_id: id})
				if(res.code == "001"){
					this.$notify({
					    message: res.msg,
					    type: 'success'
					});
					loginApi.getShoppingCart({user_id: this.$store.state.user_id})
					.then(res=>{
						if(res.data.code === "001"){
							this.$store.commit("setCartData",res.data.shoppingCartData)
						}
					})
				}
			},
		}
		
	}
</script>
<style lang="scss" scoped>
	.shop_main{
		width: 1225px;
		min-height: 400px;
		margin: 0 auto;
	}
	.el-table{
		margin: 30px 0;
		font-size: 18px;
	}
	.btn{
		width: 15px;
	}
	.shop_foot{
		height: 40px;
		background-color: white;
		margin-bottom:30px;
		padding: 0;
	}
	.card_left{
		float: left;
	}
	.card_right{
		float: right;
	}
	.card_right>button{
		width: 100px;
		height: 40px;
	}
</style>